<template>
  <div class="container_box">
    <Header></Header>
    <div class="newstable warpper_box">
      <ul>
        <li v-for="item in data_list" :key="item.id" @click="todetails(item.id)">
          <p>{{item.title}}</p>
          <span>{{item.createTime}}</span>
        </li>
      </ul>
      <!-- 分页 -->
      <div class="pagination" v-if="total > 10">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "@/components/Header.vue";

import { post } from "@/plugins/api";
export default {
  props: {},
  components: { Header },
  data() {
    return {
      total: 0, // 总条数
      pageSize: 10, // 页容量
      currentPage: 1, // 当前第几页
      data_list: []
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getdatalist()
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdatalist()
    },
    // 进入详情页
    todetails(id) {
      this.$router.push({
        path: "/newsdetail",
        query: {
          id
        }
      });
    },
    // 获取数据列表
    getdatalist() {
      post("/strategy/select_strategy", {
        pageSize: this.pageSize,
        page: this.currentPage
      }).then(res => {
        // console.log(res);
        this.data_list = res.data;
        this.total = res.count;
      });
    }
  },
  mounted() {
    this.getdatalist();
  },
  watch: {},
  computed: {},
  filters: {}
};
</script>
<style lang="scss" scoped>
.container_box {
  background-color: #fff;
}
.newstable {
  ul {
    border: 1px solid #ddd;
    margin: 20px 0;
    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 10px;
      border-bottom: 1px solid #ddd;
      cursor: pointer;
      &:last-child {
        border: none;
      }
      p {
        font-size: 18px;
        &:hover {
          color: #37bcfb;
        }
      }
      span {
        color: #666;
      }
    }
  }
  .pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
